<template>
  <el-config-provider :locale="$i18n.locale === 'zh_CN' ? zh_CN : en_US">
    <router-view />
  </el-config-provider>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import zh_CN from 'element-plus/dist/locale/zh-cn.mjs';
import en_US from 'element-plus/dist/locale/en.mjs';
import { useSettingStore, useMenuStore, useNavTabStore } from '@/store';

window.$t = useI18n().t; //全局翻译
const route = useRoute();
const menuStore = useMenuStore();
const navTabStore = useNavTabStore();
const { initTheme } = useSettingStore();

// 监听路由变化
watch(
  () => route.path,
  (newVal) => {
    menuStore.changeActive(route.meta.parentMenu || newVal); //路径缓存在菜单
    handleNavTab();
  },
);

initTheme();
/**
 * 路由变化后添加对应的tab标签
 * */
const handleNavTab = () => {
  navTabStore.addTabItem({
    title: route.meta.title || '未命名',
    path: route.path,
    name: route.name,
    query: route.query,
  });
  route.meta.keepAlive && navTabStore.addCacheItem(route.name);
};
</script>

<style lang="less">
#app {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--el-bg-color-page);
  line-height: 1.6;
  font-size: 14px;
}
</style>
